<template>
    <div>
        <van-nav-bar
      class="nav"
      left-arrow
      @click-left="onClickLeft"
      title="正在支付中..."
    >
      <template #right>
        <van-icon name="medal-o" size="30" />
      </template>
    </van-nav-bar>
    <div class="first">
        <div class="money">应付金额：<span>{{route.query.sum}}</span>元</div>
        <van-form class="form1" @submit="onSubmit">
            <van-cell-group inset>
                <van-field   v-model="money" label="付款：" placeholder="请输入金额"
                :rules="[{required:true,message:'输入金额不能为空'}]"
                />
                <van-field label="评分">
                    <template #input>
                        <van-rate v-model="rate1"/>
                    </template>
                </van-field>
            </van-cell-group>
            <van-button style="width:300px;margin-top: 50px;" round block type="primary" native-type="submit">确认支付</van-button>
        </van-form>
    </div>
    </div>
</template>

<script lang="ts" setup>
import {useRouter,useRoute} from 'vue-router'
import {ref,reactive,watch,onMounted} from 'vue'
import {showSuccessToast,showFailToast} from 'vant'
import $http from '@/http'
const router=useRouter()
const route=useRoute()
const money=ref('')
const rate1=ref(3)
// 返回上一页
const onClickLeft = ()=>{
    history.back()
}

const onSubmit=async ()=>{
    if(!money.value)return;
    if(money.value!=route.query.sum){
        showFailToast('输入金额不正确')
    }else{
       showSuccessToast('支付成功');
       await  $http.orderApi.del(route.query.orderId);
       router.push('/home/my');
    }

}
</script>

<style lang="scss" scoped>
.first{
    background-color: aquamarine;
    height: 570px;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    .money{
        // padding: 20px;
        color: #07c160;
        font-size: 20px;
       // text-align: center;
        >span{
            color: red;
            font-size: 30px;
        }
    }
    .form1{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
    }
}
    
</style>

<style lang="scss">
    :root {
  --van-nav-bar-background: #07c160;
  --van-nav-bar-title-text-color: white;
  --van-nav-bar-height: 70px;
  --van-nav-bar-icon-color: red;
  --van-nav-bar-title-font-size: 24px;
  --van-nav-bar-z-index: 100;
}
.van-field__label{
  color: #07c160;
}
</style>